页面图片预加载与懒加载策略 |
您所在的位置：网站首页 › linux查询文件句柄数 limit -n › 页面图片预加载与懒加载策略 |
|
在图片的加载策略之前，我们先来了解下html网页中，图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签img标签会在html渲染解析到的时候，如果解析到img src值，则浏览器会立即开启一个线程去请求该资源。 正常情况是解析到了src便发起请求， img 标签隐藏 通过css样式隐藏img的显示发现除了Opera不请求，其他浏览器都会马上请求， 全部浏览器都会请求 2. img 同一张图重复 所有的浏览器都只请求一次，因为http在发出请求的时候，会检验是否有缓存，有缓存就会从缓存读取 那么你知道如何判断资源是否是缓存还是服务器返回的呢，看这边 img 在background中 重复背景 .test1 { background: url(bg1.jpg) } .test2 { background: url(bg1.jpg) } test1 test2所有浏览器都只发起一次请求 隐藏元素背景 .test3 { display: none; background: url(bg2.jpg) } test1Opera 和Firefox对display:none的元素的背景，不会立即发生请求，只有当其display 不为none才会发起图片请求。其他浏览器则是立即发起请求 重写背景 .test1 { background: url(bg1.jpg) } .test1 { background: url(bg2.jpg) } test1重写背景，浏览器只会请求覆盖的那个背景图 多重背景 .test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); } test1对全部的背景都会请求 元素不存在，但是设置了背景 .test3 { background: url(bg3.jpg) } .test4 { background: url(bg4.jpg) } test1.test4并不存在，这个时候，浏览器并不会去请求bg3.jpg,当且仅当背景的应用元素存在时（不管在当前是显示还是不显示），才会发生请求 hover背景 a.test1 { background: url(haorooms.jpg); } a.test1:hover { background: url(http2.jpg); } test1触发hover的时候，才会请求hover下的背景。在实际中，会遇到这个背景图初次显示闪一下的情况，如果要优化，就预加载这张图即可。 js动态生成img并赋值 var el = document.createElement('div'); el.innerHTML = ''; //document.body.appendChild(el);只有Opera 不会马上请求图片，其他浏览器都是执行了代码就发起请求，Opera一定要元素添加到dom时，才会发出请求 在做项目的过程中，经常会遇到需要图片预加载与懒加载，图片预加载就是为了在展示的时候减少图片加载过程不好的载入体验，而图片懒加载则是处于这张图片不在当前可视区域展示，为了网络带宽以及提升首次加载速度而做的优化。 图片预加载 1.img标签 如上面所列举的那些情况，就可以利用，比如用img标签与dom的background-image 来达到预加载的效果。在展示前就可以保证图片资源已经加载完成。 js Image对象 const preloadImg = (url) => { const img = new Image(); if(img.complete) { //图片已经加载过了，可以使用图片 //do something here } else { img.onload = function() { //图片首次加载完成，可以使用图片 //do something here }; } img.src = url; }注意，最好是先定义onload，再赋值src，不然会出现资源返回，但是onload还没有挂载的情况。 在实际的项目我遇到过的，就是需要在某些图片加载完成再做下一步，那么这个时候，我们就需要知道某些图片序列确定是预加载完成，同样还是使用preloadImg，结合一下promise，有多个图片资源，可以用promise.all。就可以保证所有的图片加载完成再进行下一步 var promiseAll = imgData.map(function (item, index) { return new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { img.onload = null; resolve(img); }; img.error = function () { reject('图片加载失败'); }; img.src = item; }); }); Promise.all(promiseAll).then( function () { // 图片全部加载完成，进行下一步 // todo }, function (err) { console.log(err); } ); 图片懒加载所谓图片懒加载，就是延迟加载图片资源，是对网页性能的一种优化方式，比如当我们打开一个网页的时候，优先展示的图片，比如首屏图片，就先加载，而其他的图片，当需要展示的时候，再去请求图片资源，避免了首次打开时，一次性加载过多图片资源。 1.最简单的图片懒加载同样地，我们再回顾一下文章开始讲的，如果是img标签，浏览器解析到img的src有值，就会去发起请求，那么我们就可以借助这个操作，在懒加载的图片，先不赋值，等到需要展示的时候，再赋值 const src = $('.show-img').attr('data-src'); $('.show-img').attr(src, src); 在距离可视区域一定距离的时候加载图片一般实际中，我们不会在需要展示的时候，才发起图片请求，不然就不会有图片预加载的需求了，那么如何判断图片在何时需要展示呢？在下拉流之类的网页中，我们一般是在图片距离可视区域的一定距离，比如50px，就开始请求图片资源 如何判断图片是否在可视区域中？ 原生js判断元素是否在可视区域内，这里的可视区域的距离都是以垂直距离为准方法一： A: document.documentElement.clientHeight 可视窗口的高度 B: element.offsetTop dom相对于文档顶部的距离 C: document.documentElement.scrollTop 滚动条滚动的距离 B - C < A 即说明元素在可视区域内 方法二：getBoundingClientRect const domObj = element.getBoundingClientRect(); domObj.top：元素上边到视窗上边的距离; domObj.right：元素右边到视窗左边的距离; domObj.bottom：元素下边到视窗上边的距离; domObj.left：元素左边到视窗左边的距离; const clientHeight = window.innerHeight; 当 domObj.top < clientHeight 表示dom在可视区域内了 实际应用 const preImages = $('img[data-src]').not('.pred-img'); Array.from(preImages).forEach((item) => { if (isPreLoad(item)) { loadImg(item); } }); const loadImg = (img) => { if (!img.src) { img.src = img.attr('data-src').addClass('pred-img'); } }; const isPreLoad = () { const preObj = getBoundingClientRect(); const cH = $(window).height(); return preObj |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |